Manual Flow Panel

You are here:

Manual Flow Panel

Flow Panels, require that you have at least one page item to use. As such, the first thing to do is to create a page items.

Create a Title and Description Page Item

Refer to the Page Items section on how to create Page Items. Add two text boxes onto the stage, so that they resemble the screenshot below.

To easily distinguish these boxes, change the labels on each box to:

ProductTitle
ProductDescription

Verify Access to Flow Panel Icon

Access to the flow panel icon must be verified before the flow panel can be created. Once the page item above has been created, access the Catalog items view and create a new Personalized Catalog Item.

Access the created catalog item and ensure the flow panel icon is shown as an option in the tools menu as shown below.

If the flow panel icon is not shown, this means that you do not have the entitlement needed to use it. Contact your Support Administrator for assistance.

Create First Flow Panel

The first flow panel must be created for the document. Open the personilized catalog item in the previous section and follow the steps below:

Drag the Flow Panel icon onto the Designer stage and resize it.
Select the Flow Panel and click the “Add” button.
This opens a prompt and displays the list of available page items we can choose from.

Choose the Title and Description page item that was created in the Create a Title and Description Page Item section.
Once you’ve selected the page item, it appears in the flow panel as shown below.

Insert another page item into the flow panel by repeating steps 4-6.
We should now have to shared items shown in our flow panel.

Now that we have two page items, let’s add some space between each item. Input 20 into the “Offset Right” field. All units are in points, so this translates to 20 points.

With this change, 20 points have been inserted between the first and second page item. Click the Preview button to view a preview of the change.

Page Items are displayed as observed in the browser and the outline of the Flow Panel is not shown in the PDF. The flow Panel is merely a container for the items within it.

Flow Panel Directions

By default, the flow panel direction is Left to Right. This means that every new Shared Widget you add to the flow panel will be placed to the right of the previous one. The following flow directions are available in the application:

Top of the page:
- Left to Right
- Right to Left
Bottom of the page:
- Left to Right
- Right to Left
Left Side of the Page:
- Top to Bottom
- Bottom to Top
Right Side of the Page:
- Top to Bottom
- Bottom to Top

Changing the Order of Items

Designers can change the order of page items on a page. For example, the second page item can be shown first on the page. An example of this is described below.

Using the document configured in the Create First Flow Panel section, click on the “+ Manage Items” in the top left of the flow panel, as shown below.

This opens the page items screen. On the left, the list of page items added to the flow panel are displayed. Drag and drop a page item to change the display order.

Once the order of the page item has been changed, click the X button to return to the Designer stage.

View Results

The Flow panel should reflect the display order you just made, as shown below.

Flow Panel Boundaries

So far, the two page items that were added to the flow panel conveniently fit within the boundaries of the flow panel. In this section, we will cover adding a third page item and managing adding page items to a smaller flow panel.

Continuing with the Flow Panel configured in the previous section, change the Flow Direction to “Left to Right” and reduce the size of the Flow Panel, so that the width so that the two items in it don’t fit.

Check the "Exclude item" option in the flow panel configuration area and generate a preview build of the document.

The first item added to the flow panel, but the second one doesn’t show up because of the checkbox labeled “Exclude item” was enabled.

When checked, the system automatically removes any item that doesn’t fit within the bounds of the Flow Panel. If you were to un-check this item box, and click “Preview” again, you would see the 2nd box appear as shown below.

Understanding Why Flow Panel Items That Do Not Fit are Removed

The example used above, while over simplistic, provides a good foundation for understanding the basics of how the Flow Panel works. In this exercise, we will create an additional shared widget, with different dimensions, and add it to the Flow Panel.

Create New Page Item

Continuing with the Flow Panel configured in the previous section, create a new page item and make the overall width of this page item equal to half of the widgets we have so far.

In this example, we’ve created a page item as follows:

The title of the page item is "ThinnerWidget.
Created an image box and added an image.
Added a text box with a name value.

Add New Page Item to Flow Panel

Now that we’ve created our new smaller page, we need to add it to our Flow Panel as follows:

Go back to the Personalized Catalog Item with the Flow Panel and select the flow panel icon.
Click “+ Manage items” in the top left of the flow panel and select the new “ThinnerWidget” that was just created.

Once you’ve added the new page item, change the flow direction from "left to right" to "top to bottom" to ensure that the items are within the flow panel area. This is because there is enough space (vertically) to place all three items. As shown below.

Managing Excluded Items

Let’s reset the flow panel configuration by setting the flow direction of the flow panel from to “Left to Right”.

Ensure the "Exclude item" option is checked.

Generate a preview for the document and click the "View Preview" button.

In the resulting PDF, we see that:

The first item was placed
- The second item didn’t fit, AND because “Exclude item” was checked,
The second item was removed
Finally, the third item was placed where the second item should have been.

Items will Flow one after the other, hence the name “Flow” Panel. If an item doesn’t fit within the bounds of a Flow Panel, it is removed, and the next item in the list is processed.

What if you need all three items to be displayed? This is where Flow Panel Overflow comes into play.

Flow Panel and Inclusion Rules on Page Items

Up to now we have dealt with scenarios where each Page Item we add to the flow panel shows up in the flow panel if there is room. What happens if one of the items in our shared widget had inclusion rules? Let’s find out.

Add Inclusion Rules to a Page Item

Continuing with the Catalog Item setup in the previous section, go to the ThinnerWidget that was created in the previous section and edit it.

For demonstration purposes, we are going to forcibly add inclusion rules on both the picture box and textbox, so that they are never included at build time.

Select the picture box and click on the Rules tab.
Add a new Inclusion rule and input the following expression:
- “true === false”

Note: The expression we’ve entered will always result to False. This means that the picture box will never be included. For the purposes of this exercise this is the desired result. In the real world, you generally wouldn’t enter such an expression.

Click the Save button to complete configuration of the inclusion rule.
Add the inclusion rule to the text box below the picture box. (repeat the steps above).
Once both boxes have inclusion rules, click the “Finish” button.

At this point, the items in the shared widget will never appear at built time.

Arrange Items in the Flow Panel to See Impact of Inclusion Rules

Return to the Personalized Catalog Item previously configured and change thhe Flow Direction to “Top to Bottom”.
Let’s change the order of the item in our flow panel so that the “Thinner Widget” is placed between two other items. As shown below

Generate a build preview and then click the "View Preview" button to view the PDF. The returned PDF should resemble the following.

The following can be observed from this image:

The “Thinner Widget” does not appear. This is due to all items in the shared widget having inclusion rules that result in them not being included.
Because the “Thinner Widget” was not included, we see that the next shared widget shifted up to the next available position.

Note: In such situations, items shift Left, Right, Down, or Up based on the Flow Direction specified for the flow panel.

Partial Inclusion Rules

In the previous example, inclusion rules were added to all items in the “Thinner Widget”. But what happens if only one of the items in “Thinner Widget” had an inclusion rule.

Open the "ThinnerWidget" page item and remove the inclusion rule from both the text and picture box. Once this is done, rebuild the catalog item containing the 3 page items.

The following can be observed:

The picture box in “Thinner Widget” was not included, as expected.
The textbox from “Thinner Widget” was included.
The textbox from “Thinner Widget” was moved beneath the previous item in the flow panel.

Making a Flow Panel User Configurable

So far, we’ve been using Flow Panels without much thought to how the end user would consume the document Now that we have foundation in Flow Panels, let’s walk through more practical example of creating a document for the end user.

The result will look something like this:

Requirements for User Configurable Document

To make the document user configurable, below are requirements that must be satisfied:
This document must be order-able by the end user.
The document can never exceed one page.
The end user ordering this document, needs to be able to:
- Add various fruits to the menu
- Choose a required image for each fruit option
- Enter the required description for each fruit option
- Enter an optional price for each fruit option

Create Page Item

Create a new Page Item and add the following configuration features:

Add a picture box that will hold the Fruit Image.
- Make the picture box user configurable and required.
Add a Textbox that will hold the Fruit Menu description:
- Make the textbox user configurable and required.
Add a Textbox that will hold the price:
- Make the textbox user configurable.

Below is an example of the configuration settings.

That should be all we need for the page item. Now we need to setup the Catalog Item.

Create Catalog Item

Create a new Catalog Item and title it "Fruit Menu". Configure the following settings:

Add a picture box that will serve as our masthead and insert an image.
Add a textbox that will hold the title and label it "Fruit Menu".
Add a Flow Panel below the Fruit Menu text box.

The Catalog Item should resemble the following:

So far, we haven’t added anything that wasn’t covered in the previous sections. If users ordered this document, they wouldn’t be able to make additions to the flow panel.

Configure Flow Panel Settings

Change the Flow Direction to “Top to Bottom”.

Check the “User Configurable” checkbox.
Check the “Required” checkbox.
Click “Edit Search Criteria”.

In the dialogue that opens, enter “fruit”

NOTE: We named the shared widget “Fruit Selection”, by entering “fruit”, only the desired shared widgets will be made available for the user to select from
For “Min Items”, enter 1.
- This will force the user to choose at least one item.
For “Max Items”, enter 4:
- This number depends on the dimensions of your flow panel as well as your page item.
Check “Allow Duplicates”.
- This will allow the user to choose the same “Fruit Selection” page item multiple times.
- If we have multiple different page items to choose from, we might want to leave this unchecked.
For “Offset bottom”, enter 10. Remember: offset adds space between each item in the flow panel.
Your Flow Panel configuration should now match the following:

Click “Finish”.
Remember to “Approve” the catalog item.

Our Catalog Item should not satisfy all our business requirements

Order Fruit Selection Catalog Item

From this point forward, we will act as end users (not Designers or Administrators), to order this document. Order the Fruit Menu catalog item that was configured and view the following:

Click “Configure” button. The end user will see the list of page items that they can choose for the catalog item.

Remember: we specified that only items with “fruit” should be made available. Select/click “Fruit Selection” and you now see the individual pieces of the page items displayed.

Below we see the first item after it’s been configured with a picture, description & price

Let’s add a few more item

Remember: because the “allow duplicates” was checked, the user will be able to re-select the “Fruit Selection”

Below is an example where a few more items have been added and configured

If add more items than can fit in the flow panel, the scroll position of the flow panel seems to be bottom, rather than top. When Flow Direction is specified as Top to bottom.

When Top to bottom, the first item should always be displayed
The Max number of items is not enforced. could add 5 items, when a limit of 4 was specified
When editing a flow panel in wizard, the “selected widgets” doesn’t display a rendering of what the current shared widget resembles.
The user is prevented from proceeding without adding at least 1 item.
Remember that we set the Minimum items to “1” when this document was configured
Once the user has added the 4 items (the maximum number of allowed items), the user cannot add additional items, without first removing an item already selected.
Click Finish

You should see a PDF as follows: